<template>
	<em-page class="tab-demo" :em-styles="pageStyles">
		<em-header-inset style="margin-bottom: 10px;"></em-header-inset>
		<v-tabs v-model="current" :tabs="tabs" field="typeName" activeColor="#fff" lineColor="#fff"
			@change="changeTab"></v-tabs>
		<mescroll ref="refmescroll" v-if="newTypeID" :typeId="newTypeID" :height="`${systemInfo.windowHeight-190}px`">
		</mescroll>
		<em-header class="header" title="每日新闻" :em-styles="headerStyles"></em-header>
	</em-page>
</template>

<script>
	import mixin from '../../mixins/tab';
	import mescroll from './mescrollItem.vue';

	import {
		mapState
	} from 'vuex'
	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
		allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
		allowDefault: true
	})
	// #endif

	export default {
		mixins: [mixin],
		components: {
			mescroll
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				current: 0,
				tabs: [],
				newTypeID: ""
			}
		},

		computed: {
			...mapState([
				'systemInfo'
			]),
			pageStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color--1'])
				}
			},
			headerStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color-1', 'shadow-1']),
					title: app.$getThemeStyle(['color-1'])
				}
			}
		},
		created() {
			// 因为nvue不支持挂载vue实例方法，但是又可以通过getApp()获取到vue实例和所挂载的方法，然后将this.$em替换，这样模板中就可以使用$em调用vue实例方法了
			this.$em = app.$em
		},
		methods: {
			changeTab(index) {
				this.current = index;
				this.getNewTypeId();
			},
			changeSwiper(obj) {
				this.current = obj.detail.current;
				this.getNewTypeId();
			},

			load() {
				let url = " https://www.mxnzp.com/api/news/types/v2?app_id=" + getApp().globalData.app_id +
					"&app_secret=" + getApp().globalData.app_secert;
				// console.log(url);
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						if (res.data.code == 1) {
							this.tabs = res.data.data;
							this.newTypeID = this.tabs[0].typeId;
							console.log(this.newTypeID);
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			show() {

			},
			hide() {
				console.log('demo on hide')
			},
			getNewTypeId() {
				let index = this.current;
				this.newTypeID = (Array.isArray(this.tabs) && this.tabs.length > 0 && this.tabs.length > index) ? this
					.tabs[index]
					.typeId : '';

				console.log(this.$refs.refmescroll.downCallback());
				//downCallback

			}
		}
	}
</script>

<style>
	.header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 101;
	}

	.scroller {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-bg-green {
		background-color: green;
	}

	.uni-bg-blue {
		background-color: blue;
	}
</style>